<template>
<!-- 修复 -->
<div>
  <div class="submit-box head-line body-cont">
    <AddressCard :addr="addressData" />
    <div class="card-shadow">
      <div class="weui-cell area-box">
        <view class="weui-cell__hd">
          <view class="weui-label">联系电话</view>
        </view>
        <view class="weui-cell__bd">
          <input maxlength="50" class="flex-box" name="phone" v-model="phone" type="number" placeholder="请输入联系人手机号">
        </view>
      </div>
    </div>
    <div class="card-shadow">
      <view class="weui-cell weui-cell_select">
        <view class="weui-cell__hd">
          <view class="weui-label">服务日期</view>
        </view>
        <view class="weui-cell__bd">
          <picker
            mode="date"
            :value="date"
            :start="startDate"
            @change="dateChange"
          >
            <view class="weui-select text-right">{{date}}</view>
          </picker>
        </view>
      </view>
    </div>
    <div v-for="(item, index) in selectArray" :key="index" class="card-shadow">
      <div class="weui-cell weui-cell_select">
        <div class="weui-cell__hd">
          <div class="weui-label">{{item.title}}</div>
        </div>
        <div class="weui-cell__bd">
          <picker :value="item.select || 0" :range="item.range" @change="selectChange(index, $event)">
            <div class="weui-select text-right" :class="{'default-color': !!item.range[item.select]}">{{item.range[item.select] || '请选择'}}</div>
          </picker>
        </div>
      </div>
    </div>
    <div class="card-shadow">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <textarea
            class="weui-textarea default-color"
            name="remarks"
            v-model="remarks"
            placeholder="如有其它需求请在此填写备注"
            @input="textareaInput"
            :maxlength="maxlength"/>
          <div class="weui-textarea-counter">{{nowLength}}/{{maxlength}}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="btn-box-fixed flex-box">
    <div class="total-box flex-1">合计：<i class="total-price inline">￥{{orderPrice}}</i><p class="muted inline">起</p></div>
    <div class="btn-full" @tap="submit">提交预约</div>
  </div>
</div>
</template>
<script>
import dateUtil from '@/utils/dateUtil'
import AddressCard from '@/components/AddressCard/index'
import saveOrder from '@/interface/order/saveOrder'
import valid from '@/utils/valid'
import getServicePrice from '@/interface/getServicePrice'
import getAddressList from '@/interface/address/getAddressList'
import {rangeData, serviceTypeData} from '@/config'

export default {
  components: { AddressCard },
  data () {
    const today = dateUtil.format(new Date(), 'yyyy-MM-dd')
    return {
      isSubmit: false,
      addressData: {},
      phone: '',
      startDate: today,
      date: today,
      selectArray: [
        { name: 'repairType', title: '修复方式', select: '', range: rangeData.repairType }
      ],
      remarks: '',
      nowLength: 0,
      maxlength: 50,
      orderPrice: ''
    }
  },
  computed: {
  },
  methods: {
    selectChange (index, e) {
      this.selectArray[index].select = e.mp.detail.value
    },
    textareaInput (e) {
      this.nowLength = e.mp.detail.value.length
    },
    dateChange (e) {
      this.date = e.mp.detail.value
    },
    hadAddress () {
      const addr = this.addressData || {}
      return addr.custName && addr.areaCode && addr.phone
    },
    submit () {
      if (!this.hadAddress()) {
        this.dialog.showToast('请先填写地址')
        return
      }
      if (!valid.isPhone(this.phone)) { return }
      if (!this.date) {
        this.dialog.showToast('请选择服务日期')
        return false
      }
      for (let i = 0; i < this.selectArray.length; i++) {
        if (this.selectArray[i].select === '') {
          this.dialog.showToast(`请选择${this.selectArray[i].title}`)
          return
        }
      }
      const sd = this.selectArray.reduce((obj, v) => ({...obj, [v.name]: Number(v.select)}), {})
      this.isSubmit = true
      saveOrder({
        addressId: this.addressData.id,
        serviceType: serviceTypeData.chxf,
        ...sd,
        phone: this.phone,
        serviceDate: this.date,
        remarks: this.remarks,
      }).then(v => {
        console.log(v)
        this.goStatusPage('success')
      }).catch(msg => this.dialog.showToast(msg || '保存失败'))
        .finally(() => { this.isSubmit = false })
    },
    getPrice () {
      getServicePrice().then(data => {
        this.orderPrice = data.postpartumRepairPrice
      })
    }
  },
  onShow () {
    const {store} = this.globalData
    if (store.selectAddr) {
      this.addressData = store.selectAddr
      this.globalData.store.selectAddr = null
    }else if(!this.hadAddress()){
      getAddressList({isDefault: true}).then(data => {
        this.addressData = data || {}
      })
    }
  },
  beforeMount () {
    this.checkLogin()
  },
  mounted () {
    getAddressList({isDefault: true}).then(data => {
      this.addressData = data || {}
    })
    this.getPrice()
  }
}
</script>
<style lang="less">
page {
  background-color: #f9f9f9;
}
</style>